<template>
	<view >
		<view class="tn-main-gradient-blue--reverse kaiti admin-title">博主信息</view>
		<view class="admin">
			<tn-list-cell>
				<text class="admin-icon tn-icon-my-lack"></text>
				用户：{{ adminInfo.userName }}
			</tn-list-cell>
			<tn-list-cell>
				<text class="admin-icon tn-icon-my-circle"></text>
				姓名：{{ adminInfo.realName }}
			</tn-list-cell>
			<tn-list-cell>
				<text class="admin-icon tn-icon-write"></text>
				签名：{{ adminInfo.sign }}
			</tn-list-cell>
			<tn-list-cell>
				<text class="admin-icon tn-icon-map"></text>
				地址：{{ adminInfo.address }}
			</tn-list-cell>
			<tn-list-cell>
				<text class="admin-icon tn-icon-wechat"></text>
				微信：{{ adminInfo.wechat }}
			</tn-list-cell>
			<tn-list-cell>
				<text class="admin-icon tn-icon-gitee"></text>
				码云：{{ adminInfo.gitee }}
			</tn-list-cell>
			<tn-list-cell>
				<text class="admin-icon tn-icon-github"></text>
				Github：{{ adminInfo.github }}
			</tn-list-cell>
			<tn-list-cell>
				<text class="admin-icon tn-icon-email"></text>
				邮箱：{{ adminInfo.mail }}
			</tn-list-cell>
			<tn-list-cell>
				<text class="admin-icon tn-icon-phone"></text>
				电话：{{ adminInfo.phone }}
			</tn-list-cell>
			<tn-list-cell>
				<text class="admin-icon tn-icon-iot"></text>
				职业：{{ adminInfo.occupation }}
			</tn-list-cell>
			<tn-list-cell>
				<text class="admin-icon tn-icon-qq"></text>
				QQ：{{ adminInfo.qq }}
			</tn-list-cell>
			<tn-list-cell>
			  <view class="list-icon-text">
			    <view class="list__left">
			      <view class="list__left__icon tn-icon-emoji-good tn-text-clip tn-main-gradient-orangered"></view>
			      <view class="list__left__text">头像</view>
			    </view>
			    <view class="list__right">
			      <tn-avatar-group :lists="[{src: adminInfo.avatar}]" size="sm"></tn-avatar-group>
			    </view>
			  </view>
			</tn-list-cell>
			<tn-list-cell>
			  <view class="list-icon-text">
			    <view class="list__left">
			      <view class="list__left__icon tn-icon-tag tn-text-clip tn-main-gradient-orangeyellow"></view>
			      <view class="list__left__text">标签</view>
			    </view>
			    <view class="list__right">
			      <tn-tag
							v-for="item in adminInfo.blog_tags"
							:key="item.id"
							backgroundColor="tn-main-gradient-indigo"
							shape="circle" 
							margin="5rpx 5rpx">{{ item.name }}</tn-tag>
			    </view>
			  </view>
			</tn-list-cell>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				adminInfo:{}
			}
		},
		methods: {
			getAdmin(){
				this.$api.getAdmin().then(res => {
					if(res.code == 200){
						this.adminInfo = res.data[0]
					}
				})
			}
		},
		onShow() {
			this.getAdmin()
		}
	}
</script>

<style lang="scss" scoped>
	.admin-title{
		text-align: center;
		font-size: 38rpx;
		padding: 20rpx 0;
	}
.admin{
	padding: 40rpx;
	&-icon{
		margin-right: 18rpx;
	}
}
.list {
    &__left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 200rpx;
      &__icon, &__image {
        margin-right: 18rpx;
      }
    }
    
    &__right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
			flex-wrap: wrap;
    }
  }
  
  .list-icon-text, .list-image-text {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .list-image-text {
    .list {
      &__left {
        &__image {
          width: 20rpx;
          height: 20rpx;
        }
      }
    }
  }
</style>
